<!DOCTYPE html>
<html>
<head>
  <title>登录页</title>
    <script src="lib/jquery-3.4.1.js"></script>
  <script src="lib/jquery-3.4.1.min.js"></script>
<style type="text/css">
 @import url(https://fonts.googleapis.com/css?family=Amatic+SC);
html,
body {
  height: 100%;
}

body {
  background: #6179cd;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
body a {
  color: white;
  font-family: Amatic SC;
  letter-spacing: 2px;
  font-size: 1em;
  line-height: 0;
  text-align: center;
  margin: 0.8em;
  display: block;
}

.svg-container {
  width: 250px;
  cursor: pointer;
  z-index: 919;
}
.svg-container .succulent {
  max-width: 100%;
  padding-top: 10px;
}
.svg-container .right-leaf,
.svg-container .center-leaf,
.svg-container .left-leaf {
  transition: transform 0.4s;
  transform: rotate(0);
}
.svg-container .right-leaf {
  transform-origin: left bottom;
}
.svg-container .center-leaf {
  transform-origin: center bottom;
}
.svg-container .left-leaf {
  transform-origin: right bottom;
}
@keyframes bounce {
  0%, 10%, 100% {
    transform: scale3d(1, 1, 1);
  }
  20% {
    transform: scale3d(1.03, 1.03, 1.03);
  }
  60% {
    transform: scale3d(1, 1, 1);
  }
  70% {
    transform: scale3d(1.01, 1.01, 1.01);
  }
}
.svg-container .bounce {
  animation: bounce 0.8s ease-in-out;
}
.svg-container .animation .right-leaf {
  transform: rotate(15deg);
}
.svg-container .animation .center-leaf {
  transform: rotate(28deg);
}
.svg-container .animation .left-leaf {
  transform: rotate(-10deg);
}
.svg-container .animation .cat {
  opacity: 1;
}
@keyframes bounce-up {
  0% {
    transform: translate(8px, 8px);
  }
  30% {
    transform: translate(-3px, -3px);
  }
  50% {
    transform: translate(0);
  }
  60% {
    transform: translate(-1px, -1px);
  }
}
.svg-container .bounce-up {
  animation: bounce-up 0.6s ease;
}
.svg-container .cat {
  opacity: 0;
  max-width: 100%;
  z-index: -100;
}

.line-container {
  position: relative;
}
.line-container svg {
  position: absolute;
  left: 66%;
  top: -18px;
}
@keyframes dash {
  from {
    stroke-dashoffset: 60;
  }
  to {
    stroke-dashoffset: 20;
  }
}
.line-container .dash {
  opacity: 1;
  animation: dash 0.5s linear forwards;
}
.line-container line {
  stroke-dasharray: 20;
  stroke-dashoffset: 60;
}
.line-container .leftSparks {
  left: 27%;
}
.line-container .spark {
  position: absolute;
  stroke: white;
  stroke-width: 2px;
  z-index: -10;
}
    @import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: "Raleway", sans-serif;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container:hover .top:before, 
.container:hover .top:after,
.container:hover .bottom:before,
.container:hover .bottom:after, 
.container:active .top:before, 
.container:active .top:after,
.container:active .bottom:before,
.container:active .bottom:after {
  margin-left: 200px;
  transform-origin: -200px 50%;
  transition-delay: 0s;
}
.container:hover .center, .container:active .center {
  opacity: 1;
  transition-delay: 0.2s;
}

.top:before, 
.top:after,
.bottom:before,
.bottom:after {
  content: "";
  display: block;
  position: absolute;
  width: 200vmax;
  height: 200vmax;
  top: 50%;
  left: 50%;
  margin-top: -100vmax;
  transform-origin: 0 50%;
  transition: all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
  z-index: 10;
  opacity: 0.65;
  transition-delay: 0.2s;
}

.top:before {
  transform: rotate(45deg);
  background: #E6A8BE;
}
.top:after {
  transform: rotate(135deg);
  background: #AE7389;
}

.bottom:before {
  transform: rotate(-45deg);
  background: #FFE4F5;
}
.bottom:after {
  transform: rotate(-135deg);
  background: #005B58;
}

.center {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
  transition-delay: 0s;
  color: #333;
}
.center input {
  width: 100%;
  padding: 15px;
  margin: 5px;
  border-radius: 1px;
  border: 1px solid #ccc;
  font-family: inherit;
}
.btn {
    appearance: none;
    outline: 0;
    background-color: pink;
    border: 0;
    padding: 10px 15px;
    color: white;
    border-radius: 3px;
    width: 200px;
    cursor: pointer;
    font-size: 18px;
    transition-duration: 0.25s;

    &:hover {
      background-color: rgb(245, 247, 249);
    }
  }
}
</style>
</head>
<body>
<div class="container" onclick="onclick">
  <div style="margin-left: 630px;font-size: 30px;margin-top: 20px;color: white;position: absolute;z-index: 99;">~欢迎来到爱猫小屋~
<div class="svg-container" id="plantContainer">
  <svg xmlns="http://www.w3.org/2000/svg" width="550" height="150" viewBox="-9 0 160 200" class="succulent" id="svgPlant">

    <g class="cat" id="cat">
      <title>cat</title>
      <path d="M102.85,17.09,101.33,2.34A2.61,2.61,0,0,0,97.2.5L85,9.35a2.56,2.56,0,0,0-.9,1.2A132,132,0,0,0,26,21.94a2.71,2.71,0,0,0-.74-.43L10.23,16a2.73,2.73,0,0,0-3.59,3.23l3.92,15.55a2.7,2.7,0,0,0,.37.81C3.38,51,4.18,59.76,7.27,65a20.86,20.86,0,0,0,6.43,6.24l97.83-14.86,3.24-5.69C122.69,38.22,108.94,22.93,102.85,17.09Z" fill="#ead3c3"/>
      <circle cx="30.65" cy="41.59" r="2.8" transform="translate(-8.82 8.25) rotate(-13.43)" fill="#4c4c4c"/>
      <path d="M131,87.22l1.58-.73c6.17-3.59.14-12.75.14-12.75L115.77,47.65,9.56,68.74" fill="#ead3c3"/>
      <path d="M131,77.22,7.77,104.14c-5.59.27-7.33-7-7.33-7C-2.4,89.65,9.56,68.78,9.56,68.78" fill="#ead3c3"/>
      <path d="M121.43,64s12.33,8.72,14.32,31.91c0,0,3.37,27.45-18.49,45.38l-1.12,8.4s-.74,7.25-5.85,4.93c0,0-4.36-5-5.41-7.9,0,0-16.71,11.41-35.76,8.53,0,0-2.5,7.31-4.6,8.87,0,0-5.22,4.77-7.24-.75l-4.16-9.61s-28.32-6.31-39.32-30.2c0,0-10.1-21.62-4.4-40.63" fill="#ead3c3"/>
      <circle cx="85.12" cy="30.57" r="2.8" transform="translate(-4.77 20.6) rotate(-13.43)" fill="#4c4c4c"/>
      <path d="M27.75,51.68l60.4-13.31a15.25,15.25,0,0,1-.46,6.31C84.63,56.55,70.28,64.33,58.83,65.15,47,66,33.36,63.45,27.75,51.68Z" fill="#4c4c4c"/>
      <path d="M50.91,65.35S53.82,58.3,64.47,60c0,0,3.56-4.85,12.18-1.26C76.65,58.74,67.73,66.28,50.91,65.35Z" fill="#edb9b9"/>
     <ellipse cx="99.14" cy="40.72" rx="4.86" ry="2.55" transform="translate(-6.74 24.11) rotate(-13.42)" fill="#edb9b9"/>
      <ellipse cx="18.75" cy="58.99" rx="4.86" ry="2.55" transform="translate(-12.99 5.85) rotate(-13.22)" fill="#edb9b9"/>
    </g>  <!-- end cat svg -->

    <g id="leaves">
    <title>succulent</title>
    <g class="right-leaf">
      <path class="leaf" d="M143.37,91.56C123.8,120.1,98.48,136.95,86.8,129.18S81.52,92,101.08,63.42,157.65,25.8,157.65,25.8,162.93,63,143.37,91.56Z" fill="#4fc6b7"/>
      <path class="shadow" d="M157.65,25.8,86.81,129.18a12,12,0,0,0,6.8,1.89c13.07,0,33.42-15.68,49.75-39.51C162.93,63,157.65,25.8,157.65,25.8" opacity="0.13"/>
    </g>
    <g class="left-leaf">
      <path class="leaf" d="M18.58,91.56c19.57,28.54,44.89,45.39,56.57,37.62S80.46,92,60.85,63.42,4.29,25.8,4.29,25.8-1,63,18.58,91.56Z" fill="#4fc6b7"/>
      <path class="shadow" d="M4.29,25.8,75.14,129.18C86.86,121.41,80.46,92,60.85,63.42S4.29,25.8,4.29,25.8" opacity="0.13"/>
    </g>
    <g class="center-leaf">
      <path class="leaf" d="M105.62,62.38c0,34.45-11.42,62.38-25.51,62.38S54.6,96.85,54.6,62.38,80.11,0,80.11,0,105.62,27.92,105.62,62.38Z" fill="#4fc6b7"/>
      <path class="shadow" d="M80.11,0V124.77c14.09,0,25.51-27.92,25.51-62.38S80.11,0,80.11,0" opacity="0.13"/>
    </g>
    </g> <!--end leaves svg-->
    <g class="pot">
      <polygon points="160 106.91 0 106.91 0 123.97 14.4 123.97 28.33 200 132.92 200 146.85 123.97 160 123.97 160 106.91" fill="#e3b9bc"/>
      <polygon points="160 123.97 145.57 133.54 15.67 133.54 0 123.97 160 123.97" fill="#d8a7ad"/>
      <polygon class="shadow" points="80.11 106.91 80.11 200 132.62 200 144.93 133.54 145.42 133.54 160 123.97 160 106.91 80.11 106.91" opacity="0.11"/>
    </g> <!-- end pot svg -->

  </svg> <!-- end nested succulent svg -->
  
<!--   <a id="msg">CLICK</a> -->
  
  <div class="line-container" id="textArea">
    <a style="font-size: 10px;">点击领彩蛋 </a>
    <svg
         xmlns="http://www.w3.org/2000/svg"
         x="0px" y="0px" width="23.6px" height="42.4px" 
         viewBox="0 0 23.6 42.4"
         xml:space="preserve" class="rightSparks sparks">
      <line class="spark" x1="1.1" y1="17.8" x2="14.8" y2="17.8"/>
      <line class="spark" x1="0.5" y1="29.5" x2="12.5" y2="34.7"/>
      <line class="spark" x1="0.5" y1="6.3" x2="12.5" y2="1.1"/>
    </svg>
    
    <svg version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         x="0px" y="0px" width="14.8px" height="35.8px" 
         viewBox="0 0 14.8 35.8" 
         xml:space="preserve" class="leftSparks sparks">
      <line class="spark" x1="13.7" y1="17.8" x2="0" y2="17.8"/>
      <line class="spark" x1="14.3" y1="29.5" x2="2.4" y2="34.7"/>
      <line class="spark" x1="14.3" y1="6.3" x2="2.4" y2="1.1"/>
    </svg>


  </div> <!-- end line svg container-->
  
</div> <!-- end svg-container -->


  </div>
  <div class="top"></div>
  <div class="bottom"></div>
  <div class="center">
    <p style="color: white;">初始帐号：maomao 密码：123</p>
    <form name="form1">
    <input type="username" name="username" placeholder="用户名"/>
    <input type="password" name="password" placeholder="密码"/>
    </form>
    </br>
    <button class="btn" onclick="btnlog()">登录</button>
  </div>

</body>
</body>
</html>
<script type="text/javascript">
  const plant = document.getElementById("svgPlant");
const leaves = document.getElementById("leaves");
const cat = document.getElementById("cat");
const clickText = document.getElementById("textArea");

function animate() {
  plant.classList.toggle("animation");
  leaves.classList.toggle("bounce");
  cat.classList.toggle("bounce-up");
  
  const sparksList = document.querySelectorAll('svg .spark');

  for (var i = 0; i < sparksList.length; i++) {
    sparksList[i].classList.toggle('dash');
  }
}

plant.addEventListener("click", animate);

clickText.onclick = function() {
  animate();
};
</script>
<script type="text/javascript">
  var zhanghudata = [['maomao','123'],['huangzixuan','456'],['lijielin','789']]

  function btnlog(){
    if(document.form1.username.value==""){
      alert("用户名不能为空！");
      return false
    }
    if(document.form1.password.value==""){
      alert("密码不能为空！");
      return false
    }

    var user = document.form1.username.value;
    var psword = document.form1.password.value;
    var panduan = false;

    for (var i = 0;i < zhanghudata.length;i++) {
      if(zhanghudata[i][0]==user && zhanghudata[i][1]==psword){
        panduan = true;
        break
      }
    }
    if (panduan) {
      alert('登录成功！')
      window.open('./2.html')
    }else{
      alert('账号密码不存在！')
    }
  }
</script>